<script setup>
import { reactive, ref, computed } from 'vue'
import { useUserStore } from '../../store'

const userStore = useUserStore()
const userInfo = userStore.userInfo
// 判断是不是开发环境
const isDev = computed(() => import.meta.env.DEV)
const actionUrl = computed(() => isDev.value ? '/api/api/file/upload' : '/api/file/upload')

// 表单对象
const formRef = ref(null)
// 表单数据
const formModel = reactive({
    userType: userStore.userType,
    avatar: userInfo.avatar,
    name: userInfo.name,
    introduction: userInfo.introduction,
    password: '',
    newPassword: ''
})

const rules = {
    introduction: [{ required: true, message: '请输入名字', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
}

// 上传成功
const handleAvatarSuccess = (response, uploadFile) => {
    const { code, msg } = response
    // 设置用户头像地址
    if (code === 200) {
        if (isDev.value) {
            formModel.avatar = `/api${msg}`
        } else {
            // 打包需要去掉/api
            formModel.avatar = msg
        }
    }
}

// 上传前的验证
const beforeAvatarUpload = (rawFile) => {
    if (rawFile.type === 'image/jpeg' || rawFile.type === 'image/png') {
        return true
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('头像大小不能超过2MB!')
        return false
    }
    ElMessage.error('图片必须为jpg或者png格式')
    return false
}



const handUpdate = async () => {
    const valid = await formRef.value.validate()
    if (!valid) {
        ElMessage.error('信息填写有误,请检查')
        return
    } else {
        userStore.updateUserInfo(formModel)
    }
}

</script>

<template>
    <el-card class="w1/2">
        <template #header>
            <div>
                <span>个人信息</span>
            </div>
        </template>
        <el-form ref="formRef" :model="formModel" :rules="rules" label-width="80px">
            <el-form-item label-width="0px">
                <div class="w-full flex justify-center items-center">
                    <el-upload :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-avatar v-if="formModel.avatar" :size="80" :src="formModel.avatar" />
                        <el-icon v-else>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item prop="introduction" label="用户名字">
                <el-input v-model="formModel.introduction" />
            </el-form-item>
            <el-form-item prop="password" label="原始密码">
                <el-input type="password" v-model="formModel.password" />
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码">
                <el-input type="password" v-model="formModel.newPassword" />
            </el-form-item>
            <el-form-item>
                <el-button w-full type="primary" @click="handUpdate">
                    更新用户信息
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>